<template>
  <view v-show="pageLoaded">
    <view class="tabs">
      <v-tabs :tabs="tabs" @changeType="getList" :selected="7" :live="true" />
    </view>
    <view class="list">
      <view
        class="item"
        v-for="item of list"
        :key="item.id"
        @click="handleToDetail(item)"
      >
        <image
          class="item-img"
          :src="img_baseUrl + item.imgPath"
          mode="aspectFill"
        />
        <view class="item-content">
          <view class="item-title">{{ item.title }}</view>
          <view class="item-desc" v-if="item.introduction">
            {{ item.introduction }}
          </view>
        </view>
      </view>
    </view>
    <view class="noData" v-if="list.length === 0">
      <image :src="`${img_baseUrl}/statics/std/static/noData.png`"></image>
      <text>暂无活动</text>
    </view>
  </view>
</template>

<script>
import mpHtml from "mp-html/dist/uni-app/components/mp-html/mp-html";
import vTabs from "../../components/tabs.vue";
import { requestGet } from "../../utils/request";

const img_api = process.env.VUE_APP_BASEURL_IMG_API;

export default {
  components: {
    vTabs,
    mpHtml,
  },
  data() {
    return {
      pageLoaded: false,
      loading: 2, // 0:不再加载; 1:加载中; 2:加载完成;
      img_baseUrl: img_api,
      tabs: [],
      channelId: 7,
      pageNum: 1,
      pageSize: 10,
      list: [],
    };
  },
  onLoad() {
    Promise.all([this.loadTypes()]).then(() => {
      this.pageLoaded = true;
    });
  },
  onReachBottom() {
    this.loadNextPage();
  },
  methods: {
	  handleToDetail(item) {
	  	if (item.linkUrl) {
	  		uni.navigateTo({
	  		  url: item.linkUrl,
	  		});
	  		return
	  	} 
	    uni.navigateTo({
	      url: `/page_index/activity/detail?id=${item.id}`,
	    });
	  },
    toPage(url, params = {}) {
      let paramsString = "";
      for (const paramsKey in params) {
        if (!paramsString) {
          paramsString += "?";
        } else {
          paramsString += "&";
        }
        paramsString += `${paramsKey}=${params[paramsKey]}`;
      }
      uni.navigateTo({
        url: `${url}${paramsString}`,
      });
    },
    getList({ type }) {
      this.channelId = type;
      this.pageNum = 1;
      this.loadList(this.channelId).then(() => {
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 0,
        });
      });
    },
    loadNextPage() {
      if (this.loading === 0 || this.loading === 1) return;
      this.pageNum++;
      this.loadList(this.channelId);
    },
    loadTypes() {
      return requestGet("/baseplatform/home/play/tab", {
        parentId: 7,
      }).then(({ code, data: tabs }) => {
        if (code !== 200) {
          tabs = [];
        }
        const defaultTab = {
          label: 7,
          text: "全部",
        };
        this.tabs = [].concat(
          [defaultTab],
          tabs.map((item) => {
            return {
              label: item.id,
              text: item.channelName,
            };
          })
        );
      });
    },
    loadList(channelId) {
      if (this.loading === 1) {
        return Promise.reject({
          msg: "loading...",
        });
      }
      this.loading = 1;
      return requestGet("/baseplatform/home/content/list", {
        channelId,
        isQuerySub: channelId === 7 ? 1 : 0,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }).then(({ code, rows: lists, total }) => {
        if (channelId !== this.channelId) return;

        if (code !== 200) {
          lists = [];
          total = 0;
        }
        if (this.pageNum === 1) {
          this.list = [].concat(lists);
        } else {
          this.list = this.list.concat(lists);
        }

        if (lists.length < this.pageSize || total === this.list.length) {
          this.loading = 0;
        } else {
          this.loading = 2;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.tabs {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 12rpx 32rpx;
  background: #ffffff;
}

.list {
  padding: 16rpx 32rpx calc(16rpx + env(safe-area-inset-bottom));

  .item {
    width: 686rpx;
    height: 360rpx;
    background-color: #fefefe;
    border-radius: 24rpx;
    overflow: hidden;
    margin-top: 24rpx;
    position: relative;

    &:first-of-type {
      margin-top: 0;
    }

    .item-img {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .item-content {
      width: 100%;
      height: 144rpx;
      background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.7) 100%
      );
      position: absolute;
      left: 0;
      bottom: 0;
      display: flex;
      flex-flow: column nowrap;
      justify-content: flex-end;
      padding: 0 12rpx 24rpx;
      box-sizing: border-box;
    }

    .item-title {
      font-size: 32rpx;
      font-weight: 700;
      color: #ffffff;
      line-height: 44rpx;
    }

    .item-desc {
      font-size: 26rpx;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.8);
      line-height: 26rpx;
      margin-top: 4rpx;
    }
  }
}

.noData {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 500rpx;

  image {
    height: 240rpx;
    width: 240rpx;
    flex: 0 0 auto;
  }

  text {
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.3);
    line-height: 34rpx;
  }
}
</style>
